<template>
  <div class="range-input">
    <NumberRange
      v-model="modelData"
      :only-integer="item.onlyInteger"
      :start-placeholder="item.startPlaceholder"
      :end-placeholder="item.endPlaceholder"
      :max="item.max"
      :min="item.min"
      clearable
      @keyup.enter.native="queryClick"
      @onChange="queryClick"
      @clear="queryClick"/>
    <div v-if="isShowRangeSelect && item.range && item.range.length" class="range-select">
      <el-radio-group v-model="radioData">
        <el-radio :label="''" class="fb-radio">不限</el-radio>
        <el-radio v-for="i in item.range" :key="i.key" :label="i.key" class="fb-radio">{{ i.label }}</el-radio>
      </el-radio-group>
    </div>
  </div>
</template>
<script>
import NumberRange from '@/components/Tool/module/numberRange';
export default {
  components: { NumberRange },
  model: {
    prop: 'paramsObj',
    event: 'changeVal'
  },
  props: {
    paramsObj: {
      type: Object,
      default: () => {
        return {};
      }
    },
    item: {
      type: Object,
      default: () => {
        return {};
      }
    },
    isShowRangeSelect: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    modelData: {
      get() {
        const key = this.item.keyword || this.item.key;
        if (!this.paramsObj[key] || !this.paramsObj[key].key) return [];
        return [this.paramsObj[key].start, this.paramsObj[key].end];
      },
      set(data) {
        const key = this.item.keyword || this.item.key;
        if (data && data.length === 2) {
          const isEmpty = data.every(i => i === undefined);
          if (!isEmpty) {
            data = data.map(i => {
              if (i) return Number(i);
              return i;
            });
            const ans = {
              key,
              isRange: true,
              start: data[0],
              end: data[1]
            };
            if (this.item.newOptions) ans.newOptions = true;
            this.$set(this.paramsObj, key, ans);
          } else {
            this.$set(this.paramsObj, key, {});
            delete this.paramsObj[key];
          }
        } else {
          this.$set(this.paramsObj, key, {});
          delete this.paramsObj[key];
        }
        this.$emit('changeVal', this.paramsObj);
      }
    },
    radioData: {
      get() {
        if (this.modelData.length === 0) return '';
        return this.setRadio(this.modelData);
      },
      set(data) {
        if (data) {
          const temp = data.split('-');
          const tempStart = temp[0] || temp[0] === 0 ? temp[0] : undefined;
          const tempEnd = temp[1] || temp[1] === 0 ? temp[1] : undefined;
          this.modelData = [tempStart, tempEnd];
        } else {
          this.modelData = [];
        }
      }
    }
  },
  methods: {
    queryClick() {
    },
    setRadio(value) {
      const range = this.item.range;
      if (!range) return '';
      const start = value[0] || value[0] === 0 ? value[0] : this.item.min;
      const end = value[1] || value[1] === 0 ? value[1] : this.item.max;
      if (this.isNumberEmpty(start) && this.isNumberEmpty(end)) {
        return '';
      }
      for (let i = 0; i < range.length; i++) {
        const item = range[i];
        const temp = item.key.split('-');
        const tempStart = temp[0] || temp[0] === 0 ? Number(temp[0]) : this.item.min;
        const tempEnd = temp[1] || temp[1] === 0 ? Number(temp[1]) : this.item.max;
        if (start === tempStart && end === tempEnd) {
          return item.key;
        }
      }
      return '-1';
    },
    isNumberEmpty(num) {
      return !num && num !== 0;
    }
  }
};
</script>
<style lang="scss" scoped>
.range-input {
  width: 240px;
  &::v-deep {
    .el-number-range {
      border: 1px solid #DCDFE6;
      border-radius: 4px;
      // .input-range-val {
      //   width: 108px !important;
      // }
      .input-range-val-start, .input-range-val-end {
        .el-input__inner {
          border: none !important;
        }
      }
    }

  }
}
.range-select {
  width: 240px;
}
.fb-radio {
  margin-top: 12px;
  margin-right: 16px;
}
</style>
